<template>
    <div>
        <div class="rankBox">
            <!--            跳转到榜首-->
            <div class="ranking" @click="goDetail(item.id)" v-for="(item,index) in AllSongList" :key=index>
                <div class="irankImg"><img :src="item.coverImgUrl" alt="">
                    <div class="everyday">{{item.updateFrequency}}</div>

                </div>
                <div class="irankList">
                    <!--                tracks-->
                    <p v-for="(item,index) in item.tracks" :key=index>{{index+1}}.{{item.first}}--{{item.second}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getAllSongList} from "@/api/api"

    export default {
        name: "Ranklist.vue",
        data() {
            return {
                active: 0,
                icon: {
                    active: 'https://img.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
                },
                AllSongList: []
            };
        },
        // components:{
        //     bottom
        // },
        created() {
            getAllSongList().then((res) => {
                console.log(res)
                this.AllSongList = res.list
            })
        },
        //榜单列表跳转
        methods: {
            goDetail(id) {
                this.$router.push({
                    path: '/SongList',
                    query: {id}
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .rankBox {
        height: 400px;
        width: 100%;
        overflow: hidden;
    }

    .ranking {
        display: flex;
        height: 120px;
        /*background-color: cadetblue;*/
        /*height: 40%;*/
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
    }

    .irankImg {
        position: relative;
        height: 100px;
        width: 33%;
        margin-top: 10px;
        margin-left: 10px;


    }

    .irankImg img {
        height: 100%;
        width: 100%;
    }

    /*每天更新*/
    .everyday {
        position: absolute;
        height: 20px;
        width: 70px;
        /*background-color: green;*/
        left: 3px;
        bottom: 3px;
        font-size: 12px;
        color: white;
    }

    /*排行列表*/
    .irankList {
        margin-top: 10px;
        /*background-color: greenyellow;*/
        width: 62%;
        margin-left: 5%;
    }

    .irankList p {
        margin-top: 10px;
        font-size: 12px;
    }
</style>